// .shadowBox-001

.WebTheme {
	padding: 0 16px;
	height: 100%;
	overflow-y: scroll;

	&::-webkit-scrollbar {
		display: none;
	}

	& > div {
		margin: 16px 0;
		padding: 16px;
		border-radius: 8px;

		&.ClassType {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;

			& > .TypeBackImage {
				width: 480px;
				height: 270px;
				margin: 0 16px;
				border-radius: 8px;
				overflow: hidden;

				& > img {
					width: 100%;
					height: 100%;
					display: block;
					object-fit: cover;
					cursor: pointer;
				}
				& > div {
					width: 100%;
					height: 100%;
					background: var(--theme);
				}
			}

			& > .TypeContent {
				flex: 1;
				height: 270px;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;

				& > div {
					width: 100%;
					display: flex;
					align-items: flex-start;

					&:nth-child(1) {
						font-size: 24px;
						font-weight: bold;
						line-height: 32px;
					}

					&:nth-child(2) {
						flex: 1;
						font-size: 18px;
						line-height: 24px;
						font-weight: none;
						color: #666666;
						margin: 8px 0;
					}

					&:nth-child(3) {
						justify-content: flex-end;

						& > div {
							cursor: pointer;
						}
					}
				}
			}
		}

		&.ThemeType,
		&.Options {
			& > div {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				& > div:first-child {
					font-size: 24px;
					font-weight: bold;
					line-height: 50px;
					margin-right: 16px;
					min-width: 160px;
					text-align: right;
				}

				& > input {
					line-height: 42px;
					font-size: 20px;
					font-family: ShuHeiTi;
					font-weight: bold;
				}

				.OptionsBox {
					flex: 1;
					height: 48px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					& > div {
						height: 100%;
						flex: 1;
						background: rgba(247, 247, 247, 0.5);
						backdrop-filter: blur(10px);
						border-radius: 8px;
						padding: 0 8px;
						position: relative;
						z-index: 1;
						overflow: hidden;

						&::after {
							position: absolute;
							content: "";
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							background: var(--theme);
							z-index: -1;
							opacity: 0.5;
						}
					}
				}
			}
		}

		&.ThemeType {
			position: relative;

			& > button {
				position: absolute;
				right: 16px;
				top: 16px;
			}
		}

		&.Submit {
			display: flex;
			align-items: center;
			justify-content: center;
			& > button {
				width: 300px;
			}
		}
	}
}

.ThemeColorButton {
	position: relative;
	top: 0;
	left: 0;
	width: 250px;
	height: 40px;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;

	&:hover,
	&.active {
		&::after {
			top: 0;
			height: 50%;
			width: 80%;
			border-radius: 30px;
		}

		&::before {
			bottom: 0;
			height: 50%;
			width: 80%;
			border-radius: 30px;
		}

		&::after,
		&::before {
			background: var(--theme);
			box-shadow: 0 0 5px var(--theme), 0 0 15px var(--theme),
				0 0 30px var(--theme), 0 0 60px var(--theme);
		}

		& > p {
			letter-spacing: 3px;

			&::before {
				transform: skewX(45deg) translate(200px);
			}
		}
	}

	&::before {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -5px;
		width: 30px;
		height: 10px;
		background: var(--theme);
		border-radius: 10px;
		transition: 0.5s;
		transition-delay: 0.5;
	}

	&::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -5px;
		width: 30px;
		height: 10px;
		background: var(--theme);
		border-radius: 10px;
		transition: 0.5s;
		transition-delay: 0.5;
	}

	& > p {
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 30px;
		padding: 10px;
		letter-spacing: 1px;
		text-decoration: none;
		overflow: hidden;
		color: var(--text);
		font-weight: 400px;
		z-index: 1;
		transition: 0.5s;
		backdrop-filter: blur(10px);

		&:hover {
			letter-spacing: 3px;

			&::before {
				transform: skewX(45deg) translate(200px);
			}
		}

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			height: 100%;
			background: linear-gradient(
				to left,
				rgba(255, 255, 255, 0.15),
				transparent
			);
			transform: skewX(45deg) translate(0);
			transition: 0.5s;
			filter: blur(0px);
		}
	}
}
